import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "mobx-react";
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Layout from 'pages/layout';
import Home from 'pages/home';
import Hook from 'pages/hook';
import ECharts from 'pages/echarts';
import store from 'pages/store'
import 'antd/dist/antd.css'
import "./index.css";

ReactDOM.render(
  /**
   * 如果 Provider store这样传值  stores={store} 则子组件 @inject()
   * @inject( stores => {
   *    console.log(stores)
   *     const { carStore } = stores.stores
   *     const { brand } = carStore
   *     return{
   *       brand,
   *     }
   *   })
   */
  /**
   * 如果 Provider store这样传值  {...store} 则子组件 @inject()
   * @inject( stores => {
   *    console.log(stores)
   *     const { carStore } = stores
   *     const { brand } = carStore
   *     return{
   *       brand,
   *     }
   *   })
   */
  <Provider {...store}>
    <BrowserRouter>
      <Switch> // 只匹配第一个被找到的路由组件 , 否则， 所有被匹配的路由组件均被显示
        <Route exact={true} key="/" path="/" component={Layout} />
        <Route exact={true} key="/home" path="/home" component={Home} />
        <Route exact={true} key="/hook" path="/hook/:id" component={Hook} />
        <Route exact={true} key="/echarts" path="/echarts" component={ECharts} />
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);
